<template>
  <div class="content-in">
    <div class="header bg1">
      <h1>{{ $t('product.bg1Title') }}</h1>
      <p>{{ $t('product.bg1SubTitle') }}</p>
      <p>{{ $t('product.bg1SubTitle2') }}</p>
    </div>
    <!-- 商品 -->
    <div class="good-box">
      <div v-for="(item, index) in productToObj['工业智能终端']" :key="index" class="goods bg1">
        <p class="ft-bold">{{ item[`classificationName${capitalizeLang}`] }}</p>
        <h1 class="blue">{{ item[`title${capitalizeLang}`] }}</h1>
        <p class="ft18">{{ item[`subtitle${capitalizeLang}`] }}</p>
        <div class="btn">
          <span @click="toPage(item)">{{ $t('common.learnMore') }} ></span>
          <span @click="showContact(item)">{{ $t('common.purchase') }} ></span>
        </div>
        <img :src="item.coverImage" alt="goods" class="goods01" />
      </div>
    </div>
    <div class="header bg2">
      <h1>{{ $t('product.bg2Title') }}</h1>
      <p class="white">{{ $t('product.bg2SubTitle') }}</p>
    </div>
    <div class="good-box">
      <div v-for="(item, index) in productToObj['高精度测绘和导航']" :key="index" class="goods bg2">
        <p class="ft-bold">{{ item[`classificationName${capitalizeLang}`] }}</p>
        <h1 class="blue">{{ item[`title${capitalizeLang}`] }}</h1>
        <p class="ft18">{{ item[`subtitle${capitalizeLang}`] }}</p>
        <div class="btn">
          <span @click="toPage(item)">{{ $t('common.learnMore') }} ></span>
          <span @click="showContact(item)">{{ $t('common.purchase') }} ></span>
        </div>
        <img :src="item.coverImage" alt="goods" class="goods04" />
      </div>
    </div>
    <div class="header bg3">
      <h1>{{ $t('product.bg3Title') }}</h1>
      <p class="white">{{ $t('product.bg3SubTitle') }}</p>
    </div>
    <div class="good-box">
      <div v-for="(item, index) in productToObj['生物识别与应用']" :key="index" class="goods bg3">
        <p class="ft-bold">{{ item[`classificationName${capitalizeLang}`] }}</p>
        <h1 class="blue">{{ item[`title${capitalizeLang}`] }}</h1>
        <p class="ft18">{{ item[`subtitle${capitalizeLang}`] }}</p>
        <div class="btn">
          <span @click="toPage(item)">{{ $t('common.learnMore') }} ></span>
          <span @click="showContact(item)">{{ $t('common.purchase') }} ></span>
        </div>
        <img :src="item.coverImage" alt="goods" class="goods04" />
      </div>
    </div>
    <div class="header bg4">
      <h1>{{ $t('product.bg4Title') }}</h1>
      <p class="white">{{ $t('product.bg4SubTitle') }}</p>
    </div>
    <div class="good-box">
      <div v-for="(item, index) in productToObj['智能物联和RFID']" :key="index" class="goods bg4">
        <p class="ft-bold">{{ item[`classificationName${capitalizeLang}`] }}</p>
        <h1 class="blue">{{ item[`title${capitalizeLang}`] }}</h1>
        <p class="ft18">{{ item[`subtitle${capitalizeLang}`] }}</p>
        <div class="btn">
          <span @click="toPage(item)">{{ $t('common.learnMore') }} ></span>
          <span @click="showContact(item)">{{ $t('common.purchase') }} ></span>
        </div>
        <img :src="item.coverImage" alt="goods" class="goods04" />
      </div>
    </div>
    <div class="header bg5">
      <h1>{{ $t('product.bg5Title') }}</h1>
      <p class="white">{{ $t('product.bg5SubTitle') }}</p>
    </div>
    <div class="good-box">
      <div v-for="(item, index) in productToObj['防爆终端和设备']" :key="index" class="goods bg5">
        <p class="ft-bold">{{ item[`classificationName${capitalizeLang}`] }}</p>
        <h1 class="blue">{{ item[`title${capitalizeLang}`] }}</h1>
        <p class="ft18">{{ item[`subtitle${capitalizeLang}`] }}</p>
        <div class="btn">
          <span @click="toPage(item)">{{ $t('common.learnMore') }} ></span>
          <span @click="showContact(item)">{{ $t('common.purchase') }} ></span>
        </div>
        <img :src="item.coverImage" alt="goods" class="goods04" />
      </div>
    </div>
    <div class="header bg6">
      <h1>{{ $t('product.bg6Title') }}</h1>
      <p class="white">{{ $t('product.bg6SubTitle') }}</p>
    </div>
    <div class="good-box">
      <div
        v-for="(item, index) in productToObj['户外运动装备和其他']"
        :key="index"
        class="goods bg6"
      >
        <p class="ft-bold">{{ item[`classificationName${capitalizeLang}`] }}</p>
        <h1 class="blue">{{ item[`title${capitalizeLang}`] }}</h1>
        <p class="ft18">{{ item[`subtitle${capitalizeLang}`] }}</p>
        <div class="btn">
          <span @click="toPage(item)">{{ $t('common.learnMore') }} ></span>
          <span @click="showContact(item)">{{ $t('common.purchase') }} ></span>
        </div>
        <img :src="item.coverImage" alt="goods" class="goods04" />
      </div>
    </div>
    <contact-dialog-web v-if="contactVisible" :show.sync="contactVisible" :mode="mode"></contact-dialog-web>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ContactDialogWeb from '../default/contact-dialog-web'

export default {
  components: {
    ContactDialogWeb,
  },
  props: {
    products: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      contactVisible: false,
      mode: ''
    }
  },
  computed: {
    ...mapGetters(['capitalizeLang']),
    productToObj() {
      const obj = {
        工业智能终端: [],
        高精度测绘和导航: [],
        生物识别与应用: [],
        智能物联和RFID: [],
        防爆终端和设备: [],
        户外运动装备和其他: [],
      }

      this.products.forEach((item) => {
        obj[item.classificationNameZh].push(item)
      })
      return obj
    },
  },
  methods: {
    async toPage(item) {
      if (!item.url) {
        return
      }

      this.$router.push({
        path: '/solution',
        query: {
          id: item.url,
          type: item.classificationType,
        },
      })
    },
    showContact(item) {
      this.contactVisible = true
      this.mode = item.titleZh
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.content-in {
  background: #f6f7f9;

  .header {
    position: relative;
    .pd(70, 360, 0, 360);
    .height(360);

    h1 {
      .ft(30);
      font-weight: bold;
      color: #fff;
      .mg(0, 0, 20, 0);
    }

    p {
      .ft(18);
      .mg(4, 0, 0, 0);
      font-weight: bold;

      &.white {
        color: #fff;
      }
    }

    &.bg1 {
      background-image: url(@/assets/images/product/bg1.png);
      background-size: contain;
    }

    &.bg2 {
      background-image: url(@/assets/images/product/bg2.png);
      background-size: contain;
    }

    &.bg3 {
      background-image: url(@/assets/images/product/bg3.png);
      background-size: contain;
    }

    &.bg4 {
      background-image: url(@/assets/images/product/bg4.png);
      background-size: contain;
    }

    &.bg5 {
      background-image: url(@/assets/images/product/bg5.png);
      background-size: contain;
    }

    &.bg6 {
      background-image: url(@/assets/images/product/bg6.png);
      background-size: contain;
    }
  }

  .good-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .pd(30, 0, 0, 0);
    .ft(20);

    .goods {
      .width(945);
      .height(702);
      .mg(0, 0, 30, 0);
      .pd(50, 0, 0, 0);

      background-size: 100% 100%;
      background-position: center;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: 0.3s all linear;

      img {
        transition: 0.3s all linear;
      }

      &:hover {
        background-size: 103% 103%;

        img {
          transform: scale(1.07);
        }
      }

      &.bg1 {
        background-image: url(@/assets/images/product/product1.png);
      }

      &.bg2 {
        background-image: url(@/assets/images/product/product2.png);
      }

      &.bg3 {
        background-image: url(@/assets/images/product/product3.png);
      }

      &.bg4 {
        background-image: url(@/assets/images/product/product4.png);
      }

      &.bg5 {
        background-image: url(@/assets/images/product/product5.png);
      }

      &.bg6 {
        background-image: url(@/assets/images/product/product6.png);
      }

      .goods01 {
        .width(500);
        .mg(40, 0, 0, 0);
      }

      .goods02 {
        position: absolute;
        .width(564);
        .mg(70, 0, 0, 0);

        right: 0;
      }

      .goods03 {
        .width(484);
        .mg(70, 0, 0, 0);
      }

      .goods04 {
        .width(440);
        .mg(40, 0, 0, 0);
      }

      .goods05 {
        .width(180);
        .mg(60, 0, 0, 0);
      }

      .goods06 {
        .width(540);
        .mg(80, 0, 0, 0);
      }

      .btn {
        display: flex;
        justify-content: center;
        .mg(30, 0, 0, 0);

        span {
          .mg(0, 15, 0, 15);
          .pd(0, 18, 0, 18);
          .height(32);
          .ft(18);

          cursor: pointer;
          border: 1px solid #393a3a;
          border-radius: 21px;
          display: block;
          font-weight: 400;
          color: #333;

          &.white {
            color: #fff;
            border: 1px solid #fff;
          }
        }
      }
    }
  }
}
</style>
